<template>
  <footer class="footer">
    <div class="container">
      <div class="footer-main">
        <h4>链接</h4>
        <a
          href="https://github.com/ElemeFE/element"
          target="_blank"
          class="footer-main-link"
          >代码仓库</a
        ><a
          href="https://github.com/ElemeFE/element/releases"
          target="_blank"
          class="footer-main-link"
          >更新日志</a
        ><a
          href="https://github.com/ElemeFE/element/blob/dev/FAQ.md"
          target="_blank"
          class="footer-main-link"
          >常见问题</a
        ><a
          href="https://github.com/ElementUI/element-starter"
          target="_blank"
          class="footer-main-link"
          >脚手架</a
        ><a
          href="/#/zh-CN/component/custom-theme"
          target="_blank"
          class="footer-main-link"
          >在线主题生成器</a
        ><a
          href="https://github.com/elemefe/element-react"
          target="_blank"
          class="footer-main-link"
          >Element-React</a
        ><a
          href="https://github.com/ElemeFE/element-angular"
          target="_blank"
          class="footer-main-link"
          >Element-Angular</a
        ><a
          href="https://github.com/eleme/morjs"
          target="_blank"
          class="footer-main-link"
          >MorJS</a
        >
      </div>
      <div class="footer-main">
        <h4>社区</h4>
        <a
          href="https://gitter.im/ElemeFE/element"
          target="_blank"
          class="footer-main-link"
          >在线讨论</a
        ><a
          href="https://github.com/ElemeFE/element/issues"
          target="_blank"
          class="footer-main-link"
          >反馈建议</a
        ><a
          href="https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.zh-CN.md"
          target="_blank"
          class="footer-main-link"
          >贡献指南</a
        ><a
          href="https://segmentfault.com/t/element-ui"
          target="_blank"
          class="footer-main-link"
          >SegmentFault</a
        ><a
          href="https://github.com/ElementUI/awesome-element"
          target="_blank"
          class="footer-main-link"
          >Awesome Element</a
        >
      </div>
      <div class="footer-social">
        <p class="footer-social-title">Element 2.1 Fullerene</p>
        <span
          ><div
            role="tooltip"
            id="el-popover-9398"
            aria-hidden="true"
            class="el-popover el-popper footer-popover"
            style="width: 120px; display: none"
          >
            <!---->
            <div class="footer-popover-title">饿了么技术</div>
            <img
              src="https://gw.alicdn.com/imgextra/i4/O1CN01dBDgJP1t4R3qikGBP_!!6000000005848-0-tps-344-344.jpg"
              alt=""
            />
          </div>
          <span class="el-popover__reference-wrapper"></span></span
        ><span
          ><div
            role="tooltip"
            id="el-popover-3362"
            aria-hidden="true"
            class="el-popover el-popper footer-popover"
            tabindex="0"
            style="width: 120px; display: none"
          >
            <!---->
            <div class="footer-popover-title">饿了么设计</div>
            <img
              src="https://gw.alicdn.com/imgextra/i4/O1CN015ha1O71yg3g1QaKEi_!!6000000006607-0-tps-1280-1280.jpg"
              alt=""
            />
          </div>
          <span class="el-popover__reference-wrapper"></span></span
        ><i
          class="doc-icon-weixin elementdoc el-popover__reference"
          aria-describedby="el-popover-3362"
          tabindex="0"
        ></i
        ><a href="https://github.com/elemefe" target="_blank"
          ><i class="doc-icon-github elementdoc"></i></a
        ><a href="https://gitter.im/ElemeFE/element" target="_blank"
          ><i class="doc-icon-gitter elementdoc"></i
        ></a>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  name: "Footer",
};
</script>

<style lang="scss" scoped>
.footer {
  background-color: #f7fbfd;
  width: 100%;
  padding: 40px 150px;
  overflow: hidden;
  box-sizing: border-box;
  height: 340px;
  .container {
    box-sizing: border-box;
    width: auto;
  }
  .footer-main {
    font-size: 0;
    display: inline-block;
    vertical-align: top;
    margin-right: 110px;
    h4 {
      font-size: 18px;
      color: #333;
      line-height: 1;
      margin: 0 0 15px;
    }
    .footer-main-link {
      display: block;
      margin: 0;
      line-height: 2;
      font-size: 14px;
      color: #666;
    }
  }
  .footer-social {
    float: right;
    text-align: right;
    .footer-social-title {
      color: #666;
      font-size: 18px;
      line-height: 1;
      margin: 0 0 20px;
      padding: 0;
      font-weight: 700;
    }
    .elementdoc {
      transition: 0.3s;
      display: inline-block;
      line-height: 32px;
      text-align: center;
      color: #c8d6e8;
      background-color: transparent;
      size: 32px;
      font-size: 32px;
      vertical-align: middle;
      margin-right: 20px;
    }
  }
}
</style>